window.onload = function () {
    // 当点击某一个li的时候，该li添加下边线  bottomColor
    var lis = document.querySelectorAll(".aside .nav .nav li");
    var Aa = document.querySelectorAll(".aside .nav .nav li a");
    var oUl = document.querySelectorAll(".aside .nav .nav li ul");
    for (var i = 0; i < lis.length; i++) {
      lis[i].index = i;
      lis[i].addEventListener("click", function () {
        for (var j = 0; j < lis.length; j++) {
          lis[j].className = "";
        }
        this.className = "bottomColor";
      });
    }
    // 让a字体改变颜色
    for (var i = 0; i < Aa.length; i++) {
      Aa[i].addEventListener("click", function () {
        for (var i = 0; i < Aa.length; i++) {
          Aa[i].classList.remove("blue");
        }
        this.classList.add("blue");
      });
    }
    // 显示与隐藏
    for (var i = 0; i < Aa.length; i++) {
      Aa[i].onclick = function () {
        var uls = this.nextElementSibling;
        if (getComputedStyle(uls).height == "0px") {
          for (var j = 0; j < oUl.length; j++) {
            oUl[j].style.height = "0px";
          }
          uls.style.height =
            uls.children[0].offsetHeight * uls.children.length + "px";
        } else {
          uls.style.height = "0px";
        }
      };
    }
      //   每日待办内容
  var data = [
    {
      id: 1,
      name: "王大强",
      sex: "男",
      number: '320729184874318',
      tel: '17768089801',
      place: "四川省/成都市/成华区",
      type: "次密",
      Registrant: "系统",
      date: "2021-11-12",
    },
    {
      id: 2,
      name: "李思国",
      sex: "男",
      number: '320729188871231',
      tel: '177680898012',
      place: "江苏省/苏州市/姑苏区",
      type: "密接",
      Registrant: "王强",
      date: "2013-10-12",
    },
    {
      id: 3,
      name: "王宝玉",
      sex: "女",
      number: '320729188872312',
      tel: '17768089803',
      place: "浙江省/杭州市/姑苏区",
      type: "密接",
      Registrant: "系统",
      date: "2017-11-02",
    },
    {
      id: 4,
      name: "白飞",
      sex: "男",
      number: '320729188872313',
      tel: '17768089804',
      place: "江苏省/苏州市/姑苏区",
      type: "次密",
      Registrant: "系统",
      date: "2021-11-12",
    },
    {
      id: 5,
      name: "慕雪晴",
      sex: "女",
      number: '320729188872415',
      tel: '17768089805',
      place: "四川省/乐山市/犍为",
      type: "密接",
      Registrant: "白飞",
      date: "2020-09-12",
    },
    {
      id: 6,
      name: "张海迪",
      sex: "男",
      number: '320729188876343',
      tel: '17768089807',
      place: "四川省/宜宾市/姑苏区",
      type: "密接",
      Registrant: "系统",
      date: "2020-11-06",
    },
    {
      id: 7,
      name: "李芳菲",
      sex: "女",
      number: '320729188872318',
      tel: '17768089879',
      place: "江苏省/苏州市/姑苏区",
      type: "次密",
      Registrant: "系统",
      date: "2020-01-12",
    },
    {
      id: 8,
      name: "张国焘",
      sex: "男",
      number: '320729188872318',
      tel: '17768089879',
      place: "江苏省/苏州市/姑苏区",
      type: "次密",
      Registrant: "系统",
      date: "2020-11-12",
    },
    {
      id: 9,
      name: "博浩东",
      sex: "男",
      number: '320729188872318',
      tel: '17768089879',
      place: "江苏省/苏州市/姑苏区",
      type: "次密",
      Registrant: "系统",
      date: "2020-11-12",
    },
    {
      id: 10,
      name: "汪峰",
      sex: "男",
      number: '320729188872318',
      tel: '17768089879',
      place: "江苏省/苏州市/姑苏区",
      type: "次密",
      Registrant: "系统",
      date: "2020-11-12",
    },
    {
      id: 11,
      name: "谢晓",
      sex: "女",
      number: '320729188872318',
      tel: '17768089879',
      place: "江苏省/苏州市/姑苏区",
      type: "次密",
      Registrant: "系统",
      date: "2020-11-12",
    },
    {
      id: 12,
      name: "王璐",
      sex: "女",
      number: '320729188872318',
      tel: '17768089879',
      place: "江苏省/苏州市/姑苏区",
      type: "次密",
      Registrant: "系统",
      date: "2020-11-12",
    },
    {
      id: 13,
      name: "郭京飞",
      sex: "男",
      number: '320729188872318',
      tel: '17768089879',
      place: "江苏省/苏州市/姑苏区",
      type: "次密",
      Registrant: "系统",
      date: "2020-11-12",
    },
    {
      id: 14,
      name: "薛之谦",
      sex: "男",
      number: '320729188872318',
      tel: '17768089879',
      place: "江苏省/苏州市/姑苏区",
      type: "次密",
      Registrant: "系统",
      date: "2020-11-12",
    },
    {
      id: 15,
      name: "王大强",
      sex: "男",
      number: '320729184874318',
      tel: '17768089801',
      place: "四川省/成都市/成华区",
      type: "次密",
      Registrant: "系统",
      date: "2020-11-12",
    },
    {
      id: 16,
      name: "李思国",
      sex: "男",
      number: '320729188871231',
      tel: '177680898012',
      place: "江苏省/苏州市/姑苏区",
      type: "密接",
      Registrant: "王强",
      date: "2020-10-12",
    },
    {
      id: 17,
      name: "王宝玉",
      sex: "女",
      number: '320729188872312',
      tel: '17768089803',
      place: "浙江省/杭州市/姑苏区",
      type: "密接",
      Registrant: "系统",
      date: "2020-11-02",
    },
    {
      id: 18,
      name: "白飞",
      sex: "男",
      number: '320729188872313',
      tel: '17768089804',
      place: "江苏省/苏州市/姑苏区",
      type: "次密",
      Registrant: "系统",
      date: "2020-11-12",
    },
    {
      id: 19,
      name: "慕雪晴",
      sex: "女",
      number: '320729188872415',
      tel: '17768089805',
      place: "四川省/乐山市/犍为",
      type: "密接",
      Registrant: "白飞",
      date: "2020-09-12",
    },
    {
      id: 20,
      name: "张海迪",
      sex: "男",
      number: '320729188876343',
      tel: '17768089807',
      place: "四川省/宜宾市/姑苏区",
      type: "密接",
      Registrant: "系统",
      date: "2020-11-12",
    },
    {
      id: 21,
      name: "李芳菲",
      sex: "女",
      number: '320729188872318',
      tel: '17768089879',
      place: "江苏省/苏州市/姑苏区",
      type: "次密",
      Registrant: "系统",
      date: "2020-11-12",
    },
    {
      id: 22,
      name: "张国焘",
      sex: "男",
      number: '320729188872318',
      tel: '17768089879',
      place: "江苏省/苏州市/姑苏区",
      type: "次密",
      Registrant: "系统",
      date: "2020-11-12",
    },
  ];
  var page = 1;
  //每页的条数
  var count = 10;
  //获取tbody
  var oTBody = document.querySelector("tbody");
//   获取上一页的按钮
  var oPrevBtn=document.querySelector('.prev')
  //获取下一页的按钮
  var oNextBtn=document.querySelector('.next')
//   分页
var oPagination = document.querySelector('.pagination');
// 获取新增按钮
var addButton=document.querySelector('#addBtn')
// 获取新增保存按钮
var addSaveBtn=document.querySelector('.addSaveBtn')
// 获取input
var oInput=document.querySelectorAll('#addModal input')
// 弹出框按钮
var oResetBtn=document.querySelector('.resetBtn')
// 获取搜索框
var searchInp=$('.search-box .form-control')
var oPtion=document.querySelectorAll('option')
console.log(oPtion)
// 获取搜索按钮
var oSearchBtn=document.querySelector('.search-btn')
// 获取重置按钮
var oReset=document.querySelector('.Reset-btn')
  //   页面初始化渲染
  function render() {
var searchData=[]
var str1=searchInp[0].value
var str2=searchInp[1].value==''?new Date('1992-8-25').getTime():new Date(searchInp[1].value).getTime();
var str3=searchInp[2].value==''?new Date().getTime():new Date(searchInp[2].value).getTime();
var str4=searchInp[3].value
var str5=searchInp[4].value
var str6=searchInp[5].value
var data1=[]
var data2=[]
var data3=[]
var data4=[]
//第一个条件 
console.log(str1)
if (str1.trim() == '') {
  data1 = data;
}else{
  for (var i = 0; i < data.length; i++) {
    if (data[i].name.includes(str1)) {
        data1.push(data[i])
    }
}
}
// 第二个条件
if (str2&&str3 == '') {
  data2 = data1;
}else{
  for (var i = 0; i < data1.length; i++) {
    var time=new Date(data1[i].date).getTime();
    if (time>=str2 && time<=str3) {
        data2.push(data1[i])
    }
}
}

//第三个条件 
if (str4.trim() == '') {
  data3 = data2;
}else{
  for (var i = 0; i < data2.length; i++) {
    if (data2[i].number.includes(str4)) {
        data3.push(data2[i])
    }
}
}
// 第四个条件
if (str5.trim() == '') {
  data4 = data3;
}else{
  for (var i = 0; i < data3.length; i++) {
    if (data3[i].tel.includes(str5)) {
        data4.push(data3[i])
    }
}
}
// 第五个条件
if (str6.trim() == '') {
  searchData = data4;
}else{
  for (var i = 0; i < data4.length; i++) {
    if (data4[i].Registrant.includes(str6)) {
        searchData.push(data4[i])
    }
}
}

    oTBody.innerHTML = "";
    var renderArr = searchData.slice((page - 1) * count, page * count);
    for (var i = 0; i < renderArr.length; i++) {
      var oTr = document.createElement("tr");
      oTr.innerHTML = `
      <td><input type="checkbox"></td>
            <td>${renderArr[i].id}</td>
            <td>${renderArr[i].name}</td>
            <td>${renderArr[i].sex}</td>
            <td>${renderArr[i].number}</td>
            <td>${renderArr[i].tel}</td>
            <td>${renderArr[i].place}</td>
            <td>${renderArr[i].type}</td>
            <td>${renderArr[i].Registrant}</td>
            <td>${renderArr[i].date}</td>
            <td>
            <button class="btn btn-primary btn btn-primary btn-sm see-btn">查看详情</button>
            <button class="del btn btn-danger btn btn-danger btn-sm">删除</button>
          </td>
            `;
      oTBody.appendChild(oTr);
    }
    var oPageBtn = document.querySelectorAll(".pageBtn");
    for (var i = 0; i < oPageBtn.length; i++) {
      oPagination.removeChild(oPageBtn[i].parentNode);
    }
    for (var i = 1; i <= Math.ceil(searchData.length / count); i++) {
      var oLi = document.createElement("li");
      oLi.innerHTML = `<a class="pageBtn" href="#">${i}</a>`;
      if (i == page) {
        oLi.classList.add("active");
      }
      oPagination.insertBefore(oLi, oPagination.lastElementChild);
    }
  }
  render();
  oPagination.addEventListener("click", changePage);
  function changePage(){
    if(event.target.className=='pageBtn'){
        page=event.target.innerText;
        render()
    }
  }
  oPrevBtn.addEventListener('click', prev);
  oNextBtn.addEventListener('click', next);
  function prev(){
    if(page>1){
        page--;
        render()
    }
  }
  function next(){
    if(page<Math.ceil(data.length/count)){
        page++;
        render()
    }
  }
  // 批量删除
  var deleteBtn=document.querySelector('.batch-delete')
  deleteBtn.addEventListener('click',batchDeleteFn)
  function batchDeleteFn(){
    var aInput=document.querySelectorAll('tbody input')
    var checkedArr=[]
    for(var i=0;i<aInput.length;i++){
      if(aInput[i].checked==true){
        $("#resetModal").modal("show");
      checkedArr.push(aInput[i].parentNode.nextElementSibling.innerHTML)
      }
    }
    oResetBtn.addEventListener("click", resetPass);
  function resetPass() {
    for(var i=0;i<checkedArr.length;i++){
      for(var j=0;j<data.length;j++){
        if(checkedArr[i]==data[j].id){
         data.splice(j,1)
        }
      }
    }
    //重新渲染
    render();
    $("#resetModal").modal("hide");
  }
  }
   // 单个删除
   var id;
   oTBody.addEventListener("click", del);
   function del() {
     if (event.target.className.includes("del")) {
       $("#resetModal").modal("show");
       //找到id
       id = event.target.parentNode.parentNode.children[1].innerText;
       console.log(id)
     }
   }
   oResetBtn.addEventListener("click", resetPass);
   function resetPass() {
     for (var i = 0; i < data.length; i++) {
       if (data[i].id == id) {
         //删除id所对应的数据
         data.splice(i, 1);
       }
     }
     //重新渲染
     render();
     $("#resetModal").modal("hide");
   }
//   新增
addButton.onclick=function(){
    $("#addModal").modal("show");
}
addSaveBtn.addEventListener('click',addSave)
// 正则
var rule={
    sNumber:{
        reg:/^\d{1,3}$/,
        err:'请输入正确的账号'
    },
    user:{
        reg:/^[\u4e00-\u9fa5]{2,6}$/,
        err:'请输入中文姓名！'
    },
    number:{
        reg:/^^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$  $/,
        err:'请输入身份证号'
    },
    address:{
        reg:/^[\u4e00-\u9fa5]{6,16}$/,
        err:'请输入正确的地址'
    },
    tel:{
        reg:/^1[3-9]\d{9}$/,
        err:'请输入正确的电话号码'
    },
    registerName:{
        reg:/^[\u4e00-\u9fa5]{2,6}$/,
        err:'请输入中文姓名！'
    }
}
for(var i=0;i<oInput.length;i++){
    oInput[i].onblur=function(){
        var str=this.value;
        if(str.trim()==''){
            this.nextElementSibling.innerHTML='内容不能为空！';
            this.nextElementSibling.className='red';
        }else if(rule[this.name].reg.test(str)==false){
            this.nextElementSibling.innerHTML=rule[this.name].err;
            this.nextElementSibling.className='red';
        }else{
            this.nextElementSibling.innerHTML='√';
            this.nextElementSibling.className='green';
        }
    }
}
function addSave(){
    var addId = document.querySelector('.addId').value;
    var addName = document.querySelector('.addName').value;
    var UserID = document.querySelector('.UserID').value;
    var addDress = document.querySelector('.addDress').value;
    var addTel = document.querySelector('.addTel').value;
    var registerName = document.querySelector('.registerName').value;
    var addDate = document.querySelector('.addDate').value;
    var addSex = document.querySelector('#inlineRadio4').checked ? '男' : '女'; 
    var addType = document.querySelector('#inlineRadio6').checked ? '密接' : '次密'; 

    data.push({
        id: addId,
        name: addName,
        number:UserID,
        place:addDress,
        tel: addTel,
        sex: addSex,
        type:addType,
        Registrant:registerName,
        date:addDate
    })
    render();
    //让模态框隐藏
    $('#addModal').modal('hide')
}
// 搜索
oSearchBtn.addEventListener('click',Search)
function Search(){
  page = 1;
    render();
}
// 重置
oReset.addEventListener('click',ResetFn)
function ResetFn(){
  for(var i=0;i<searchInp.length;i++){
    searchInp[i].value=''
  }
  render()
}
// 跳转页码
var aInput=document.querySelector('.jump-page input')
var aBtn=document.querySelector('.jump-page button')
aBtn.onclick=function(){
  var str=aInput.value;
  page=str;
  render();
  aInput.value=''
}
// 查看详情
oTBody.addEventListener('click',seeFn)
function seeFn(){
  if(event.target.className.includes('see-btn')){
    var id=event.target.parentNode.parentNode.children[1].innerText-1
    var str=JSON.stringify(data[id]);
    localStorage.setItem('username',str)
    location.href='./FollowPage.html'
  }
}
// 导出
var element = document.getElementById("oExcel");
var oExcel = function (event) {
  var html =
    "<html><head><meta charset='UTF-8'></head><body>" +
    document.querySelector(".table-size").outerHTML +
    "</body></html>";
  var blob = new Blob([html], { type: "application/vnd.ms-excel" });
  event.target.href = URL.createObjectURL(blob);
  event.target.download = "居家监测信息统计表";
};
element.onclick = oExcel;
  };
  

